<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>GetTrend</title>
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-3.4.0.min.js"></script>

		<script>
			$(function() {
				//给搜索框注入点击事件
				$("#btnSelect").click(function() {
					var logtimemin = $("#txtLogtimemin").val();
					var logtimemax = $("#txtLogtimemax").val();

					if (logtimemin.length == 0) {
						console.log("NO!!")
					} else {
						MyUser = {
							"beginPage": 0,
							"pageCount": 10,
							"logtimemin": logtimemin,
							"logtimemax": logtimemax,
						};

						$.ajax({
							type: "put",
							url: "http://localhost:2079/myuser/getTrend",
							contentType: "application/json;charset=utf-8",
							data: JSON.stringify(MyUser),
							dataType: "json",
							success: function(res) {
								console.log(res);

								var xdata = [];
								var ydata = [];
								for (var i in res) {
									xdata.push(res[i]["name"]);
									ydata.push(res[i]["value"]);
								}

								if (res) {
									myEchar.hideLoading() //关闭动画加载
									myEchar.setOption({
										title: {
											left: 'center',
											text: '该时间段内访问量'
										},
										xAxis: {
											type: 'category',
											data: xdata
										},
										yAxis: {
											type: 'value'
										},
										series: [{
											data: ydata,
											type: 'line'
										}]
									});
								}
							},
							error: function(errorMsg) {
								alert("用户状态分析数据加载失败");
								myEchar.hideLoading();
							}
						});
					}
				})
			})
		</script>
	</head>

	<body>
		
		<!--查询区域-->
		<div class="input-group" >
			&nbsp;&nbsp;&nbsp;&nbsp;操作时间区间：
			<input type="text" id="txtLogtimemin" /> &nbsp;&nbsp;
			<input type="text" id="txtLogtimemax" />
			<button type="button" id="btnSelect" class="btn btn-default">Search</button>
		</div>
		
		<br />
		
		<div id="main" style="width: 1200px;height: 500px;"></div>
		<script type="text/javascript">
		//基于dom初始化Echarts
		var myEchar=echarts.init(document.getElementById('main'));
		
		//数据加载之前剋现实的内容
		myEchar.showLoading();
		
		//定义要查询的条件
		MyUser={
			"beginPage":0,
		    "pageCount":10}
		
		$.ajax({
			type: "put",
			url: "http://localhost:2079/myuser/getTrend",
			contentType: "application/json;charset=utf-8",
			data: JSON.stringify(MyUser),
			dataType: "json",
			success: function(res) {
				console.log("Successfully get data:");
				console.log(res);
		
				var xdata = [];
				var ydata = [];
				for (var i in res) {
					xdata.push(res[i]["name"]);
					ydata.push(res[i]["value"]);
				}
		
				if (res) {
					myEchar.hideLoading() //关闭动画加载
					myEchar.setOption({
						title: {
							left: 'center',
							text: '访问量'
						},
						xAxis: {
							type: 'category',
							data: xdata
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							data: ydata,
							type: 'line'
						}]
					});
				}
			},
			error: function(errorMsg) {
				alert("用户状态分析数据加载失败");
				myEchar.hideLoading();
			}
		});
		</script>

	</body>
</html>
